{% extends 'template_base/base.html' %}



{% block title %}
    {{ user.blog.title }}的个人站点
{% endblock %}



{% block content %}
    <div class="row">
        <div class="col-md-2">
            {% load sideBar %}
            {% left name %}
        </div>
        <div class="col-md-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    当前位置：
                    <li class="breadcrumb-item"><a href="/index/">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ user.blog.title }}的个人站点</li>
                </ol>
            </nav>
            <div class="alert alert-info"><strong>公告：</strong>{{ user.blog.subtitle }}</div>
            {% for article in article_list %}
                <div class="m-4 p-1 shadow-sm site-title-head bg-white-95">
                    <div class="media">
                        <a href="/{{ user.username }}/article/{{ article.id }}.html">
                            <img src="/media/{{ article.head_img }}" class="width-b100" style="border-radius: 6px">
                        </a>
                    </div>
                    <div class="mt-2 mx-3 mb-1 color-black-half">
                        <a href="/{{ user.username }}/article/{{ article.id }}.html" class="font-24">
                            {{ article.title }}
                        </a>
                        <hr class="mt-2 mb-2">
                        <span class="mx-2">
                            <i class="fa fa-user-o text-danger"></i> {{ user.username }}
                        </span>
                        <span class="mx-2">
                            <i class="fa fa-clock-o text-info"></i> {{ article.create_time|date:'Y年m月d日' }}
                        </span>
                        <span class="mx-2 width-80">
                            <i class="fa fa-thumbs-o-up text-success"></i> {{ article.up_num }}人点赞
                        </span>
                        <span class="ml-2 width-80">
                            <i class="fa fa-commenting-o text-warning"></i> {{ article.comment_num }}条评论
                        </span>
                    </div>
                </div>
            {% empty %}
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                    <strong>提示：</strong>暂无文章
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="text-center">
                    <img src="/media/emotion/call.png" width="600" class="mt-3">
                    <h1 class="ml-4" style="font-size: 60px">快去催博主写文章啦！</h1>
                </div>
            {% endfor %}
        </div>
        <div class="col-md-2 text-center">
            <img src="/media/{{ user.avatar }}" width="100%" style="border-radius: 10px">
            <div class="text-left mt-2" style="line-height: 30px">
                <strong>昵称：</strong>{{ user.blog.title }}<br>
                <strong>性别：</strong>{% if user.gender == 1 %}男
            {% elif user.gender == 2 %}女
            {% else %}保密
            {% endif %}
                <br>
                <strong>电话：</strong>{{ user.phone }}<br>
                <strong>地址：</strong>{{ user.province }} {{ userinfo.city }}<br>
                <strong>邮箱：</strong>{{ user.email }}<br>
                <strong>园龄：</strong>{{ user.date_joined|timesince }}<br>
                <strong>注册日期：</strong>{{ user.date_joined|date:'Y年m月d日' }}<br>
                <strong>最后登录：</strong>{{ user.last_login|date:'m月d日H:i' }}<br>
            </div>
        </div>

    </div>
{% endblock %}



{% block js %}
    <script>
        $('body').attr('style', 'background:url(/media/{{ user.bg_img }}) !important;background-attachment: fixed !important;background-size: cover !important;')
    </script>
{% endblock %}